import React from 'react';

class LikesButton extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            likes: 0
        }
        // 解决 undefined 问题 方法1: 使用 bind 函数
        // this.increaseLikes = this.increaseLikes.bind(this)
    }
    increaseLikes() {
        // 调用 setState 来更新组件数据信息
        this.setState({
            likes: ++ this.state.likes
        });
        // console.log(this);
        // console.log(this); // 直接输出 this 控制台输出值为: undefined
    }
    render() {
        return (
            <div className="">
                <button 
                    type="button"
                    className="btn btn-outline-primary btn-lg"
                    // onClick={this.increaseLikes} // 直接输出 this 控制台输出值为: undefined
                    // 解决 undefined 问题 方法2: 使用 ES6 箭头函数
                    // 推荐使用 第二种 方式
                    onClick={() => {this.increaseLikes()}}
                >
                <span role="img" aria-label="">👍</span> {this.state.likes}
                </button>
            </div>
        )
    }
}

export default LikesButton;